<template>
	<div>
		<vCharts :style="{height: height+'px'}" :option="arr" @click="handleClick" :autoresize="true" />
	</div>
</template>

<script lang="ts" setup>
	import vCharts from 'vue-echarts'
	const emit = defineEmits(['handleClick'])
	const { height, option } = defineProps({
		height: {
			type: String,
			default: '340'
		},

		option: {
			type: [String, Array],
			default: () => []
		}
	})
	const handleClick = (val : any) => {
		for (let i=0;i<option.y.length; i++){
			if(option.y[i]?.name==val.seriesName){
				var id= option.y[i]?.warehouse_id
			}
		}
		
		emit('handleClick',val.name,id)
	
	}
	const arr = ref({

		tooltip: {
			show:false,
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			formatter: (params : any) => {
				// var arr = ''
				// for (let i = 0; i < params.length; i++) {
				// 	arr += params[i].marker + ' ' + params[i].seriesName + ': ' + params[i].data + '米' + '<br>'
				// }
				// params[0].name + '<br>' + arr
				return '详情'
			},
		},
		legend: {
			bottom: '0%',
			left: 'center',

		},

		xAxis: [option.x],
		yAxis: {
			// name: '总数',
			nameTextStyle: {
				padding: [0, 0, 0, -40]
			},
		},
		series: option.y
	})
</script>

<style>
	/* canvas{
		z-index: 9999998 !important;
	} */
</style>